import i18n from '../lan'
import echarts from 'echarts'
import { EleResize } from '../assets/esresize'

export default {
    barChart: (id, color, timeNameCode, times, legend, series) => {
        let myChart = echarts.init(document.getElementById(id));
        let echartsid = document.getElementById(id);
        myChart.setOption({
            color: color,
            title: {
                show: times.length != 0 ? false : true,
                extStyle: {
                    color: "#7d7d7d",
                    fontSize: 20
                },
                text: i18n.t('NoData'),
                left: "center",
                top: "center"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#cccccc'
                    }
                },
                position: function(point, params, dom, rect, size) {
                    // 固定在顶部
                    dom.style.zIndex = '100';
                    point[0] = '30%';
                    point[1] = '5%';
                    return point;
                },
                formatter: (data) => {
                    let relVal = "";
                    if (data.length == 2) {
                        if (timeNameCode == '2') {
                            relVal = `${data[0].name}(${i18n.t('Day')})<br/>${data[0].seriesName} : ${data[0].value}kWh<br/>${data[1].seriesName} : ${data[1].value}kWh`;
                        } else if (timeNameCode == '3') {
                            relVal = `${data[0].name}(${i18n.t('Month')})<br/>${data[0].seriesName} : ${data[0].value}kWh<br/>${data[1].seriesName} : ${data[1].value}kWh`;
                        } else {
                            relVal = `${data[0].name}(${i18n.t('Year')})<br/>${data[0].seriesName} : ${data[0].value}kWh<br/>${data[1].seriesName} : ${data[1].value}kWh`;
                        }
                    } else if (data.length == 3) {
                        if (timeNameCode == '2') {
                            relVal = `${data[0].name}(${i18n.t('Day')})<br/>${data[0].seriesName} : ${data[0].value}kWh<br/>${data[1].seriesName} : ${data[1].value}kWh<br/>${data[2].seriesName} : ${data[2].value}kWh`;
                        } else if (timeNameCode == '3') {
                            relVal = `${data[0].name}(${i18n.t('Month')})<br/>${data[0].seriesName} : ${data[0].value}kWh<br/>${data[1].seriesName} : ${data[1].value}kWh<br/>${data[2].seriesName} : ${data[2].value}kWh`;
                        } else {
                            relVal = `${data[0].name}(${i18n.t('Year')})<br/>${data[0].seriesName} : ${data[0].value}kWh<br/>${data[1].seriesName} : ${data[1].value}kWh<br/>${data[2].seriesName} : ${data[2].value}kWh`;
                        }
                    } else {
                        if (timeNameCode == '2') {
                            relVal = `${data[0].name}(${i18n.t('Day')})<br/>${data[0].seriesName} : ${data[0].value}kWh`;
                        } else if (timeNameCode == '3') {
                            relVal = `${data[0].name}(${i18n.t('Month')})<br/>${data[0].seriesName} : ${data[0].value}kWh`;
                        } else {
                            relVal = `${data[0].name}(${i18n.t('Year')})<br/>${data[0].seriesName} : ${data[0].value}kWh`;
                        }
                    }
                    return relVal;
                }
            },
            legend: {
                data: legend,
                bottom: 10
            },
            grid: {
                x: 10,
                x2: 10,
                y: 20,
                y2: 52,
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: times
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#CBCBCB',
                        type: 'dotted'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: series
        });
        window.addEventListener("resize", function() {
            myChart.resize();
        });
        // let listener = function() {
        //     myChart.resize()
        // }
        // EleResize.on(echartsid, listener);
        return myChart;
    },
    lineChart: (id, times, legend, series) => {
        let powerChart = echarts.init(document.getElementById(id));
        let selected = {};
        selected[legend[2]] = localStorage.getItem('epsPowerFlag') == 1 ? true : false;
        powerChart.setOption({
            title: {
                show: times.length != 0 ? false : true,
                extStyle: {
                    color: "#7d7d7d",
                    fontSize: 20
                },
                text: i18n.t('NoData'),
                left: "center",
                top: "center"
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                position: ['30%', '5%']
            },
            legend: {
                data: legend,
                selected: selected
            },
            grid: {
                x: 10,
                x2: 20,
                y: 68,
                y2: 20,
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: times
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    formatter: '{value} W',
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: 'dotted',
                        color: '#CBCBCB'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: series
        });
        powerChart.on('legendselectchanged', function(params) {
            if (params.selected[legend[2]]) {
                localStorage.setItem('epsPowerFlag', '1')
            } else {
                localStorage.setItem('epsPowerFlag', '0')
            }
        })
        window.addEventListener("resize", function() {
            powerChart.resize();
        });
        return powerChart;
    },
    barChart2: (id, color, Namecode, times, names, datas) => {
        let myChart2 = echarts.init(document.getElementById(id));
        myChart2.setOption({
            title: {
                show: times.length != 0 ? false : true,
                extStyle: {
                    color: "#7d7d7d",
                    fontSize: 20
                },
                text: i18n.t('NoData'),
                left: "center",
                top: "center"
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                position: function(point, params, dom, rect, size) {
                    // 固定在顶部
                    dom.style.zIndex = '100';
                    point[0] = '30%';
                    point[1] = '5%';
                    return point;
                },
                formatter: (data) => {
                    let relVal = "";
                    if (Namecode == 0) {
                        relVal = data[0].name + "<br/>" + data[0].seriesName + " : " + data[0].value + "V";
                    } else if (Namecode == 1) {
                        relVal = data[0].name + "<br/>" + data[0].seriesName + " : " + data[0].value + "A";
                    } else if (Namecode == 2) {
                        relVal = data[0].name + "<br/>" + data[0].seriesName + " : " + data[0].value + "W";
                    } else if (Namecode == 3) {
                        relVal = data[0].name + "<br/>" + data[0].seriesName + " : " + data[0].value + "℃";
                    } else if (Namecode == 4) {
                        relVal = data[0].name + "<br/>" + data[0].seriesName + " : " + data[0].value + "%";
                    }
                    return relVal;
                }
            },
            legend: {
                show: false
            },
            grid: {
                x: 10,
                x2: 20,
                y: 40,
                y2: 20,
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: times
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    formatter: '{value}',
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: 'dotted',
                        color: '#CBCBCB'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: [{
                name: names,
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: {
                    normal: {
                        color: color
                    }
                },
                data: datas
            }]
        });
        window.addEventListener("resize", function() {
            myChart2.resize();
        });
    },
    lineChart2: (id, times, legend, series) => {
        let powerChart = echarts.init(document.getElementById(id));
        let selected = {};
        powerChart.setOption({
            title: {
                show: times.length != 0 ? false : true,
                extStyle: {
                    color: "#7d7d7d",
                    fontSize: 20
                },
                text: i18n.t('NoData'),
                left: "center",
                top: "center"
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                position: ['30%', '5%']
            },
            legend: {
                data: legend,
                selected: selected,
                bottom: 10
            },
            grid: {
                x: 10,
                x2: 20,
                y: 10,
                y2: 50,
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: times
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    formatter: '{value} W',
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: 'dotted',
                        color: '#CBCBCB'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: series
        });
        window.addEventListener("resize", function() {
            powerChart.resize();
        });
        return powerChart;
    },
    lineChart3: (id, times, legend, series) => {
        let powerChart = echarts.init(document.getElementById(id));
        let selected = {};
        selected[legend[2]] = localStorage.getItem('LoadPowerFlag') == 1 ? true : false;
        selected[legend[3]] = localStorage.getItem('GridPowerFlag') == 1 ? true : false;
        selected[legend[4]] = localStorage.getItem('epsPowerFlag') == 1 ? true : false;
        selected[legend[5]] = localStorage.getItem('BatteryPowerFlag') == 1 ? true : false;
        selected[legend[6]] = localStorage.getItem('BatteryCapacityFlag') == 1 ? true : false;
        powerChart.setOption({
            title: {
                show: times.length != 0 ? false : true,
                extStyle: {
                    color: "#7d7d7d",
                    fontSize: 20
                },
                text: i18n.t('NoData'),
                left: "center",
                top: "center"
            },
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal'
                },
                position: ['30%', '5%']
            },
            legend: {
                data: legend,
                selected: selected
            },
            grid: {
                x: 10,
                x2: 20,
                y: 90,
                y2: 20,
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: times
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    formatter: '{value}',
                    textStyle: {
                        color: '#7F7F7F'
                    }
                },
                splitLine: {
                    lineStyle: {
                        type: 'dotted',
                        color: '#CBCBCB'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: series
        });
        powerChart.on('legendselectchanged', function(params) {
            if (params.selected[legend[2]]) {
                localStorage.setItem('LoadPowerFlag', '1')
            } else {
                localStorage.setItem('LoadPowerFlag', '0')
            }
            if (params.selected[legend[3]]) {
                localStorage.setItem('GridPowerFlag', '1')
            } else {
                localStorage.setItem('GridPowerFlag', '0')
            }
            if (params.selected[legend[4]]) {
                localStorage.setItem('epsPowerFlag', '1')
            } else {
                localStorage.setItem('epsPowerFlag', '0')
            }
            if (params.selected[legend[5]]) {
                localStorage.setItem('BatteryPowerFlag', '1')
            } else {
                localStorage.setItem('BatteryPowerFlag', '0')
            }
            if (params.selected[legend[6]]) {
                localStorage.setItem('BatteryCapacityFlag', '1')
            } else {
                localStorage.setItem('BatteryCapacityFlag', '0')
            }
        })
        window.addEventListener("resize", function() {
            powerChart.resize();
        });
        return powerChart;
    }
}